<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 搜索框 -->
          <div>
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <!-- 返回与搜索 -->
              <div class="back_btn">
                <!-- 返回 -->
                <div class="back_panel" @click="back">
                  <i class="el-icon-back"></i>
                </div>
                <!-- 搜索框 -->
                <div class="u_search_panel">
                  <div class="search">
                    <el-input
                      :placeholder="$t('index.searchinput')"
                      class="u-search"
                      v-model="searchForm.query" @keyup.enter.native="userSearchPostByKeyword"
                    >
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-search"
                      ></i>
                    </el-input>
                  </div>
                </div>
                <!-- 设置工具 -->
                <div class="search_set">
                  <div class="set_panel">
                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03"
                    >
                      <g>
                        <path
                          d="M10.54 1.75h2.92l1.57 2.36c.11.17.32.25.53.21l2.53-.59 2.17 2.17-.58 2.54c-.05.2.04.41.21.53l2.36 1.57v2.92l-2.36 1.57c-.17.12-.26.33-.21.53l.58 2.54-2.17 2.17-2.53-.59c-.21-.04-.42.04-.53.21l-1.57 2.36h-2.92l-1.58-2.36c-.11-.17-.32-.25-.52-.21l-2.54.59-2.17-2.17.58-2.54c.05-.2-.03-.41-.21-.53l-2.35-1.57v-2.92L4.1 8.97c.18-.12.26-.33.21-.53L3.73 5.9 5.9 3.73l2.54.59c.2.04.41-.04.52-.21l1.58-2.36zm1.07 2l-.98 1.47C10.05 6.08 9 6.5 7.99 6.27l-1.46-.34-.6.6.33 1.46c.24 1.01-.18 2.07-1.05 2.64l-1.46.98v.78l1.46.98c.87.57 1.29 1.63 1.05 2.64l-.33 1.46.6.6 1.46-.34c1.01-.23 2.06.19 2.64 1.05l.98 1.47h.78l.97-1.47c.58-.86 1.63-1.28 2.65-1.05l1.45.34.61-.6-.34-1.46c-.23-1.01.18-2.07 1.05-2.64l1.47-.98v-.78l-1.47-.98c-.87-.57-1.28-1.63-1.05-2.64l.34-1.46-.61-.6-1.45.34c-1.02.23-2.07-.19-2.65-1.05l-.97-1.47h-.78zM12 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zM8.5 12c0-1.93 1.56-3.5 3.5-3.5 1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5c-1.94 0-3.5-1.57-3.5-3.5z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <!-- tablist -->
              <div class="tablist_panel">
                <div class="item" v-for="(item, index) in tabList" :key="index">
                  <div class="item_pan" @click="doSelect(item.id)">
                    {{ item.name }}
                    <div :class="item.selected ? 'bar selected' : 'bar'"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 其他分类内容 -->
            <div class="tablist_1" v-if="tablist_1"><SearchTabRecommenderUser /></div>
            <div class="tablist_2" v-if="tablist_2"><SearchTabHotListContent /></div>
            <div class="tablist_3" v-if="tablist_3"><MainNewPostListComponents /></div>
            <div class="tablist_4" v-if="tablist_4"><SearchTabSearchDataContent :query="searchForm.query"/></div>
          </div>
        </div>
      </div>
      <MainRight />
    </div>
  </main>
</template>
<script>
//MainRight
import MainRight from "@/components/MainRight.vue";
//TabContent 
import SearchTabRecommenderUser from "@/components/SearchTabRecommenderUser.vue";
import SearchTabHotListContent from "@/components/SearchTabHotListContent.vue";
import SearchTabSearchDataContent from "@/components/SearchTabSearchDataContent.vue";
//最新消息列表
import MainNewPostListComponents from "@/components/Main/MainNewPostListComponents.vue";

export default {
  name: "SearchMainContent",
  components: {
    MainRight,
    SearchTabRecommenderUser,
    SearchTabHotListContent,
    SearchTabSearchDataContent,
    MainNewPostListComponents,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      tabList: [
        {
          id: 1,
          name: this.$t('searchview.tuijian'),
          selected: true,
        },
        {
          id: 2,
          name: this.$t('searchview.qushi'),
          selected: false,
        },
        {
          id: 3,
          name: this.$t('searchview.news'),
          selected: false,
        },
        {
          id: 4,
          name: this.$t('searchview.searchresult'),
          selected: false,
        },
      ],
      tablist_1: true,
      tablist_2: false,
      tablist_3: false,
      tablist_4: false,
      searchForm:{
        query:this.$route.query.q?this.$route.query.q:'',
      },
    };
  },
  mounted(){
    this.initData();
  },
  methods: {
    initData(){
      //如果搜索条件不为空，则切换到搜索结果      
      if(this.searchForm.query.length>0){
        this.doSelect(4);
      }
    },
    back() {
      this.$router.go(-1);
    },
    doSelect(sid) {
      //foreach遍历
      this.tabList.forEach((item) => {
        if (item.id == sid) {
          //设置tabTitle选中
          item.selected = true;
          //内容框可见
          this.showContent(sid);
        } else {
          item.selected = false;
        }
      });
    },
    showContent(id) {
      if (id == 1) {
        this.tablist_1 = true;
        this.tablist_2 = false;
        this.tablist_3 = false;
        this.tablist_4 = false;
      }
      if (id == 2) {
        this.tablist_1 = false;
        this.tablist_2 = true;
        this.tablist_3 = false;
        this.tablist_4 = false;
      }
      if (id == 3) {
        this.tablist_1 = false;
        this.tablist_2 = false;
        this.tablist_3 = true;
        this.tablist_4 = false;
      }
      if (id == 4) {
        this.tablist_1 = false;
        this.tablist_2 = false;
        this.tablist_3 = false;
        this.tablist_4 = true;
      }
    },
    //搜索功能
    async userSearchPostByKeyword(){
      if(this.searchForm.query.trim()==""){
        return;
      }
      //跳转到搜索页面并将搜索关键字传过去
      this.$router.push('/Search?q='+this.searchForm.query);
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  /* background-color: #ffffff;
  border-radius: 10px; */
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  width: 600px;
  /* display: flex;
	flex-direction: column; */
}

.back_page {
  position: sticky;
  display: flex;
  flex-direction: column;
  /* 不要忘了设置 top */
  top: 0;

  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
}

.back_panel {
  cursor: pointer;
}

.back_btn i.el-icon-back {
  font-size: 18px;
  margin-right: 20px;
  font-weight: 700;
  line-height: 40px;
}

.back_btn span {
  font-size: 18px;
  font-weight: 600;
}

.is-active {
  font-weight: bold;
}

/* 快速搜索框 */
.u_search_panel {
  display: flex;
  width: 70%;
}

.u_search_panel .search {
  flex: 1;
}

.u-search /deep/ input {
  background-color: rgba(15, 20, 25, 0.1);
}

.u-search /deep/ input:focus {
  background-color: rgba(15, 20, 25, 0);
}

/* 设置工具 */
.search_set {
  display: flex;
}

.set_panel {
  width: 40px;
  height: 40px;
  text-align: center;
  /* 设置 svg上下对齐，行高=外层容器40px+svg高度的一半 */
  line-height: 50px;
}

.set_panel:hover {
  background-color: rgba(15, 20, 25, 0.1);
  border-radius: 50%;
  cursor: pointer;
}

.set_panel svg {
  width: 20px;
  height: 20px;
}

/* tablist */
.tablist_panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  line-height: 54px;
  height: 54px;
  color: rgb(83, 100, 113);
  font-size: 15px;
  font-weight: 500;
}

.tablist_panel .item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.tablist_panel .item .item_pan {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 54px;
  width: 100%;
}

.item_pan .bar {
  position: absolute;
  border-radius: 2px;
  align-self: center;
  height: 4px;
  min-width: 54px;
  bottom: 0px;
}

.item_pan .selected {
  background-color: rgb(29, 155, 240);
}

.tablist_panel .item:hover {
  cursor: pointer;
  background-color: rgba(15, 20, 25, 0.1);
}

.tablist_1 {
  min-height: 500px;
}

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
    margin-bottom:52px;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
  }

  .left-content {
    width: 100%;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
}

@media (max-width: 1300px) {
}
</style>
<style>
/* 覆盖样式 */
.u-search input {
  border-radius: 20px;
}
</style>